<template>
  <a-modal
    :title='title'
    :width='1100'
    :visible='visible'
    :centered='true'
    :confirmLoading='confirmLoading'
    :maskClosable='false'
    :footer='true'
    @ok='handleSubmit'
    @cancel='handleCancel'
  >
    <a-spin :spinning='confirmLoading'>
      <a-divider>客户信息</a-divider>
      <table border='1' style='border-color: #e8e8e8;width: 100%;text-align: center'>
        <tr class='h'>
          <td class='font600'>业务类型</td>
          <td>
            <span v-if='record.customer.customer_identity==0'>个人</span>
            <span v-if='record.customer.customer_identity==1'>公司</span>
          </td>
          <td class='font600'>客户姓名</td>
          <td>{{ record.customer.full_name || '-' }}</td>
        </tr>
        <tr class='h'>
          <td class='font600'>身份证号</td>
          <td>{{ record.customer.idnumber || '-' }}</td>
          <td class='font600'>公司名称</td>
          <td>{{ record.customer.corporate_name || '-' }}</td>
        </tr>

        <tr class='h'>
          <td class='font600'>授权签约人</td>
          <td>{{ record.customer.signatory || '-' }}</td>
          <td class='font600'>公司类型</td>
          <td>
            <span v-if='record.customer.corporate_type==0'>个体户</span>
            <span v-if='record.customer.corporate_type==1'>小规模纳税人</span>
            <span v-if='record.customer.corporate_type==2'>一般纳税人</span>
          </td>
        </tr>
        <tr class='h'>
          <td class='font600'>客户区域</td>
          <td>{{ record.customer.region_text || '-' }}</td>
        </tr>
      </table>
      <a-divider>服务信息</a-divider>
      <table border='1' style='border-color: #e8e8e8;width: 100%;text-align: center'>
        <tr class='h2'>
          <td class='font600'>服务名称</td>
          <td class='font600'>标准价格</td>
          <td class='font600'>成交价格</td>
          <td class='font600'>服务期限</td>
          <td class='font600'>收款金额</td>
          <td class='font600'>剩余尾款</td>
          <td class='font600'>销售提成</td>
          <td class='font600'>会计提成</td>
          <td class='font600'>外勤提成</td>
          <td class='font600'>成本金额</td>
        </tr>
        <tr class='h2' v-for='(item,index) in record.package_service'>
          <td style='max-width: 200px'>{{ item.service_name }}</td>
          <td>{{ item.standard_price }}</td>
          <td>{{ item.deal_price }}
            <a @click='editRecordInfo(item,&quot;deal_price&quot;,index)'>编辑</a>
          </td>
          <td>
            <template v-if='item.month'>
              <template v-if='item.start_time_text&&item.end_time_text'>
                {{ item.start_time_text }} 至 {{ item.end_time_text }}
              </template>
              <template v-else>{{ item.month }}个月</template>
            </template>
            <template v-else>一次性服务</template>
          </td>
          <td>{{ item.collection_price }} <a
            @click='editRecordInfo(item,&quot;collection_price&quot;,index)'>编辑</a>
          </td>
          <td>{{ item.balance_price }} <a @click='editRecordInfo(item,&quot;balance_price&quot;,index)'>编辑</a>
          </td>
          <td>{{ item.sales_commission }} <a
            @click='editRecordInfo(item,&quot;sales_commission&quot;,index)'>编辑</a>
          </td>
          <td>{{ item.account_commission }} <a
            @click='editRecordInfo(item,&quot;account_commission&quot;,index)'>编辑</a>
          </td>
          <td>{{ item.outworker_commission }}
            <a @click='editRecordInfo(item,&quot;outworker_commission&quot;,index)'>编辑</a>
          </td>
          <td>{{ item.cost_price }}
            <a @click='editRecordInfo(item,&quot;cost_price&quot;,index)'>编辑</a>
          </td>
        </tr>
      </table>
      <table border='1' style='border-color: #e8e8e8;width: 100%;text-align: center;margin-top: 10px'>
        <tr class='h'>
          <td style='width:50%' class='font600'>服务说明</td>
          <td style='width:50%'>{{ record.service_desc || '-' }}</td>
        </tr>
        <tr class='h'>
          <td style='width:50%' class='font600'>付款方式</td>
          <td style='width:50%'>{{ record.pay_type == 1 ? '转账汇款' : '现金' }}</td>
        </tr>
      </table>
    </a-spin>
    <a-modal
      title='修改信息'
      :visible='editVisible'
      :destroyOnClose='true'
      @cancel='editVisible=false'
      @ok='submitEdit'
    >
      修改为：
      <a-input
        style='width: 200px'
        v-model='editValue'
      />
    </a-modal>
  </a-modal>
</template>

<script>
import * as Api from '@/api/customer'
import * as serviceApi from '@/api/customer/service'
import { SelectRegion, SelectSale } from '@/components'

export default {
  components: {
    SelectSale,
    SelectRegion
  },
  data() {
    return {
      // 对话框标题
      title: '',
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      // 当前记录
      record: {},
      // 当前模式
      mode: '',

      editVisible: false,
      editField: '',
      editValue: '',
      editItem: {}
    }
  },
  methods: {
    editRecordInfo(item, field) {
      this.editItem = item
      this.editValue = item[field]
      this.editField = field
      this.editVisible = true
    },
    async submitEdit() {
      var form = {}
      form[this.editField] = this.editValue
      console.log(this.editItem['cs_id'], form)
      const { message } = await serviceApi.edit({ apiId: this.editItem['cs_id'], form })
      this.$message.success(message)

      this.record.package_service.forEach(item => {
        if (item.cs_id === this.editItem['cs_id']) {
          item[this.editField] = this.editValue
        }
      })

      this.editVisible = false
    },

    open(record) {
      this.mode = 'edit'
      this.title = '查看详情'
      this.visible = true
      this.record = record
    },
    // 确认按钮
    handleSubmit(e) {
      e.preventDefault()
      const { form: { validateFields } } = this
      // 表单验证
      validateFields((errors, values) => {
        // 提交到后端api
        !errors && this.onFormSubmit(values)
      })
    },

    // 关闭对话框事件
    handleCancel() {
      this.visible = false
      this.form.resetFields()
    },

    // 提交到后端api
    onFormSubmit(values) {
      var api
      if (this.mode === 'add') {
        if (this.hasEmptyValue(this.fwnr)) {
          this.$message.error('请完善服务内容！')
          return false
        }
        values.serviceTable = this.fwnr
        api = Api.add({ form: values })
      } else {
        api = Api.edit({ apiId: this.record['customer_id'], form: values })
      }
      this.confirmLoading = true

      api.then(result => {
        // 显示成功
        this.$message.success(result.message, 1.5)
        // 关闭对话框
        this.handleCancel()
        // 通知父端组件提交完成了
        this.$emit('handleSubmit', values)
      })
        .finally(result => {
          this.confirmLoading = false
        })
    }

  }
}
</script>
<style scoped>
.h {
  td {
    width: 25%;
    height: 40px;
  }
}

.h2 {
  td {
    height: 40px;
  }
}

.font600 {
  font-weight: bold;
}
</style>
